<template>
    <div class="web-feild-part">
        <bi-input-handle   v-dropdown dropdown-body="body" dropdown-width="auto" 
            :status = "checkStatus"
            :icon = "loading?'fa fa-spinner fa-spin':icon"
            :placeholder = "loading?'loading...':placeholder"
            :label = "valueLabel"
            :clear = "clearLable"
            :disabled = "disabled"
            :readonly = "readonly"
            @clear="clear"
         ></bi-input-handle>
         <div ref="body"  >
             <bi-tree 
             :data="list" 
             :storagename="$user.getStorageName('web-block-group-input-fold')"  
             :children-click="childrenSelect"  
             type="menu" 
             item-key="blockgroup_id" 
             @title-click="handleTitleClick" 
             :disabled-node="disabledList"
             ></bi-tree>
        </div>
    </div>
</template>


<script>
import fieldMixin from  '@@/admin/assets/bi-plug/fieldMixin.js';

export default{
    mixins:[fieldMixin],
    data(){
        return {
            list:[],
            valueLabel:'',
            clearLable:false,
            checkStatus:true,
            loading:false
        }
    },
    computed:{
        value:{
            get(){
                return this.modelValue;
            },
            set(val){
                this.$emit('update:modelValue',val);
                this.$emit('change',val,this.valueLabel);
                this.valueChange(val);
            }
        },
    },
    props:{
        root:{
            type:Boolean,
            default:false
        },
        icon:{
            type:String,
            default:'fa-navicon'
        },
        childrenSelect:{
            type:Boolean,
            default:false
        },
        disabledList:{
            type:Array,
            default:[]
        }
    },
    mounted(){
       let list = this.$user.getLocalStorage('web-block-group-input');
       
       if (list){
            this.setList(list);
       }else{
           this.flash();
       }

    },
    methods:{
        clear(){
            this.valueLabel = '';
            this.value = '';
            this.clearLable = false;
        },
        handleTitleClick(item){
            this.clearLable =  true;
            this.valueLabel =  item.title;
            this.value = item.blockgroup_id;
        },
        flash(){
            this.loading = true;
             
            this.$ajax({
                url:this.$url({app:'web','controller':'admin.block',action:'groupTree'}),
                success:(data)=>{
                    this.loading = false;
                    this.$user.setLocalStorage('web-block-group-input',data.tree,60);
                    this.setList(data.tree);
                }
            });

        },
        setList(data){
            
            if (this.root){
                data.unshift({
                    blockgroup_id:'0',
                    title:'顶级分组',
                });
            }
            
            let parse = (item)=>{
                let list = [];
                item.forEach(element => {
                                     
                    if(element.blockgroup_id == this.value){
                        this.valueLabel = element.title;
                        this.clearLable = true;
                    }else{
                        if (element.children && element.children.length>0){
                            element.children = parse(element.children);
                        }
                    }
                    
                    list.push(element);
                });

                return list;
            }
            
           this.list =  parse(data);
            
        }
    }
}
</script>